<template>
    <div class="container">
      <div class="background-image"></div>
      <div class="content">
        <el-container>
          <el-header class="custom-header">画出你的宠物</el-header>
          <el-main>
            <div class="message-container" ref="messageContainer">
              <div v-for="message in messages" :key="message.id" :class="message.isImage ? 'message-bubble image' : 'message-bubble text'">
                <div v-if="message.isImage" class="image-container">
                  <img :src="message.content" alt="生成的宠物图片" class="pet-image"/>
                </div>
                <div v-else class="text-container">
                  {{ message.content }}
                </div>
              </div>
            </div>
            <div class="input-container">
              <el-input
                type="textarea"
                v-model="prompt"
                placeholder="描述你的宠物..."
              ></el-input>
              <el-button type="primary" @click="createArt">生成图片</el-button>
            </div>
          </el-main>
        </el-container>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    name: 'PetArt',
    data() {
      return {
        prompt: '',
        messages: [],
        taskId: ''
      };
    },
    methods: {
      createArt() {
        if (!this.prompt.trim()) {
          return; // 阻止发送空请求
        }
        this.addMessage(this.prompt, false);
        axios.post('/api/art/create', { prompt: this.prompt }, {
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('token')}`
          }
        })
        .then(response => {
          const responseData = response.data;
          if (responseData && responseData.result && responseData.result.task_id) {
            this.taskId = responseData.result.task_id;
            this.checkStatus();
          } else {
            console.error('接收到错误或格式无效:', responseData);
          }
        })
        .catch(error => {
          console.error('提交作画任务错误:', error);
        });
        this.prompt = '';
      },
      checkStatus() {
        axios.get(`/api/art/status/${this.taskId}`, {
          headers: {
            'Authorization': `Bearer ${localStorage.getItem('token')}`
          }
        })
        .then(response => {
          const responseData = response.data;
          if (responseData && responseData.result && responseData.result.finished) {
            this.addMessage(responseData.result.images_url[0], true);
          } else {
            setTimeout(this.checkStatus, 5000); // 轮询状态
          }
        })
        .catch(error => {
          console.error('查询作画任务状态错误:', error);
          setTimeout(this.checkStatus, 5000); // 处理错误后继续轮询
        });
      },
      addMessage(content, isImage) {
        this.messages.push({
          id: this.messages.length + 1,
          content,
          isImage
        });
        this.$nextTick(() => {
          const container = this.$refs.messageContainer;
          container.scrollTop = container.scrollHeight;
        });
      }
    }
  }
  </script>
  
  <style scoped>
  .container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #000; /* 备用背景颜色 */
  }
  
  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('@/assets/background.jpg'); /* 使用相对路径引入图片 */
    background-size: cover;
    background-position: center;
    opacity: 0.8; /* 根据需要调整透明度 */
  }
  
  .content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .custom-header {
    background-color: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    padding: 20px;
    border-bottom: 1px solid #ddd;
    color: #333;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 0; /* 改成矩形 */
  }
  
  .el-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .message-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.9); /* 设置背景颜色和透明度 */
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    max-height: calc(100vh - 200px); /* 设置固定高度 */
  }
  
  .message-bubble {
    max-width: 70%;
    padding: 10px 15px;
    margin: 10px 0;
    border-radius: 20px;
    position: relative;
    word-wrap: break-word;
    white-space: pre-wrap;
  }
  
  .message-bubble.text {
    align-self: flex-end;
    background: #d1eaff;
    text-align: right;
  }
  
  .message-bubble.image {
    align-self: flex-start;
    background: #f1f0f0;
    text-align: left;
  }
  
  .image-container {
    display: flex;
    justify-content: center;
  }
  
  .pet-image {
    width: 150px; /* 设置图片宽度 */
    height: auto;
    border-radius: 10px;
  }
  
  .input-container {
    display: flex;
    align-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.9); /* 设置背景颜色和透明度 */
    border-radius: 8px;
    margin-top: 10px; /* 调整位置 */
  }
  
  .el-input {
    flex: 1;
    margin-right: 10px;
  }
  </style>
  